<template>
  <div>
    <h1>{{ msg }}</h1>
    <el-divider></el-divider>
    <h1>
      <el-button type="success" @click="addHandle">新增账目</el-button>
    </h1>
    <el-divider></el-divider>
    <el-container>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="accountType" label="账目类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.accountType == 1" type="success"
              >收入</el-tag
            >
            <el-tag v-if="scope.row.accountType == 2" type="danger"
              >支出</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="accountDesc" label="账目描述"> </el-table-column>
        <el-table-column prop="accountMoney" label="记账金额">
        </el-table-column>
        <el-table-column prop="createTime" label="记账时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="rowClickHandle(scope.row)" type="text" size="small"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="update(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗 -->
      <el-dialog
        title="新增账目"
        :visible.sync="dialogFormVisible"
        label-width="80px"
      >
        <el-form :model="form">
          <el-form-item label="活动名称">
            <el-select
              v-model="form.accountType"
              placeholder="请选择账目类型"
              style="width: 100%"
            >
              <el-option label="收入" :value="1"></el-option>
              <el-option label="支出" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账目金额">
            <el-input v-model="form.accountMoney"></el-input>
          </el-form-item>
          <el-form-item label="账目描述">
            <el-input type="textarea" v-model="form.accountDesc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onsubmit">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "memuTest1",
  data() {
    return {
      msg: "开心记账本",
      tableData: [],
      dialogFormVisible: false,
      form: {},
    };
  },
  methods: {
    loadTable() {
      this.$http.get("/account/all", {}).then((res) => {
        this.tableData = res.data.data;
      });
    },
    rowClickHandle(row) {
      this.$confirm("是否真的要删除当前数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "msgbox",
      })
        .then(() => {
          this.$http
            .delete("/account/deleteAccount/" + row.id, {})
            .then((res) => {
              if (res.data.code == "0000") {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                });
                // 删除成功后刷新表格数据
                this.loadTable();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                });
              }
            });
        })
        .catch(() => {
          console.log("已取消删除操作");
        });
    },
    // 添加
    addHandle() {
      this.dialogFormVisible = true;
      this.form = {};
    },
    // 添加保存
    onsubmit() {
      if (this.form.id) {
        this.$http.post("/account/updateAccount", this.form).then((res) => {
          if (res.data.code == "0000") {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
        });
        this.loadTable();
        this.dialogFormVisible = false;
      } else {
        this.$http.post("/account/insertAccount", this.form).then((res) => {
          if (res.data.code == "0000") {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
        });
        this.loadTable();
        this.dialogFormVisible = false;
      }
    },
    //做编辑的方法
    update(data) {
      //data：存的值是当前这一行的数据
      //显示弹框
      this.dialogVisible = true;
      //做回显
      this.form = {
        accountType: data.accountType,
        accountMoney: data.accountMoney,
        accountDesc: data.accountDesc,
        id: data.id,
      };
    },
  },
  mounted() {
    this.loadTable();
  },
};
</script>
